<template xmlns:el-col="http://www.w3.org/1999/html">
  <div class="bar-container">
    <el-row>
      <el-breadcrumb separator="/">
        <el-breadcrumb-item>首页</el-breadcrumb-item>
        <el-breadcrumb-item>基础信息管理</el-breadcrumb-item>
        <el-breadcrumb-item>酒水</el-breadcrumb-item>
      </el-breadcrumb>
    </el-row>
    <!-- 添加对话框-->

    <el-dialog
      title="添加酒水"
      :visible.sync="dialogVisible"
      width="30%"
      :before-close="handleClose">
      <el-form>
        <el-form-group>
          <el-form-item label="酒名" label-width="80px">
            <el-input v-model="staff,Sname"></el-input>
          </el-form-item>
        </el-form-group>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitHandle">确定</el-button>
      </span>
    </el-dialog>
    <!--添加对话框结束-->

<!--    <el-table-->
<!--      ：data="tableData"-->

    <el-row>
      <el-form label-width="80px">
        <el-row>
          <el-col :span="8">
            <el-form-item label="搜索名字" label-width="80px">
              <el-input ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="价格范围" label-width="80px">
              <el-input ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item>
              <el-button type="success">搜索</el-button>
            </el-form-item>
          </el-col>
        </el-row>


        <div class="toolbar">
          <el-button-group>
            <el-button @click="btnAddClick" type="primary" icon="el-icon-edit">添加</el-button>
            <el-button type="primary" icon="el-icon-share">修改</el-button>
            <el-button type="paimary" icon="el-icon-delete">删除</el-button>
          </el-button-group>
        </div>


      </el-form>
    </el-row>
    <el-row><el-table
      :data="tableData"
      border
      stripe
      style="width:100%">
      <el-table-column
        prop="bhot"
        label="热度"
        sortable
        width="100px">
      </el-table-column>
      <el-table-column
        prop="bname"
        label="酒类名称"
        sortable>
      </el-table-column>
      <el-table-column
        prop="bprice"
        label="价格"
      sortable
      width="160px">
      </el-table-column>
      <el-table-column
        prop="bstorage"
        label="库存"
        sortable
        width="50px">
      </el-table-column>
      <el-table-column
        prop="bpurchase"
        label="购买"
        width="80px">
      </el-table-column>
    </el-table>
      <el-pagination
        small
        layout="prev,pager,next"
        :total="50">
      </el-pagination>
    </el-row>
  </div>
</template>

<script>
  export default {
    name: "bar",data(){
      return{
        tableData:[]
      }
    },mounted(){
      /*挂载结束之后*/
      var _this=this;
      this.axios({
        url:'http://localhost:3000/bar/list',
        method:'get'
      }).then(function (res) {
        _this.tableData=res.data;
      })
    },methods(){
      var _this=this;
      this.axious({
        url:'http://localhost:3000/bar/add',
        method: 'get',
        params:{
          Sname:this.bar.Sname
        }
      }).then(function (res) {
        if (res.data.flag){
          _this.tableData=res.data.bar;
          _this.$message('添加成功')
          _this.dialogVisible=false;
        } else{
          alert('添加失败');
        }

      })
  }
  }
</script>

<style scoped>
  .toolbar {
    margin-top: 10px;
    margin-bottom: 10px;
  }
  .toolbar .el-button{
    margin-right: 10px;
  }
</style>
